<template>
  <view>
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="通知详情"></van-nav-bar>
    <!-- #endif -->
    <scroll-view class="notice-detail" scroll-y="true" :style="scrollStyle">
      <view class="notice-head">
        <view class="notice-title">{{ noticeData.noticeTitle }}</view>
        <view class="notice-time">{{ noticeData.sendingTime }}</view>
      </view>
      <view class="notice-content">
        {{ noticeData.noticeContent }}
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts"  setup>
import { setToastInstance, systemInfo } from '@/mixins/info';
import { queryAppNotice } from '@/service/apis/mine';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

let scrollStyle = ref(`height:calc(100vh -  ${systemInfo.safeBottom}px)`);
// #ifdef H5
scrollStyle.value = `height:calc(100vh - ${systemInfo.navHeight}px - ${systemInfo.safeBottom}px)`;
// #endif

const noticeData = reactive({
  noticeTitle: '',
  sendingTime: '',
  noticeContent: '',
});
onLoad((option: any) => {
  queryAppNotice({ id: option.noticeId }).then((res: any) => {
    noticeData.noticeTitle = res.noticeTitle || '--';
    noticeData.sendingTime = res.sendingTime || '--';
    noticeData.noticeContent = res.noticeContent || '--';
  });
});

// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss">
page {
  background-color: #f2f2f2;
}
</style>
<style lang="scss" scoped>
.notice-detail {
  .notice-head {
    padding-top: 23px;
    // border-bottom: 1px solid #f5f5f5;
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: column;

    .notice-title {
      font-size: 20px;
      color: #242424;
      text-align: center;
      font-weight: 500;
    }

    .notice-time {
      font-size: 14px;
      color: #858585;
      margin-top: 4px;
    }
  }

  .notice-content {
    padding: 16px;
    font-size: 14px;
    color: #545454;
    word-break: break-all;
    word-wrap: break-word;
  }
}
</style>
